<!--
	章节学习
-->
<template>
<div class="chapter-box">
<div class="chapter-content">
<el-container>
<!-- 左边目录树 start -->
<el-aside width="200px">
<div class="chapter-tree">
	<span @click.stop="addCatalogueItem(1,{id:0})">
		<el-icon :size="20"><folder-add/></el-icon>
	</span>
	<el-tree
		:data="catalogueData"
		@node-click="treeClick"
		:props="{label:'catalogueText'}">
		<template #default="{ node, data }">
			<span class="add-delete-icon-box">
				<span>{{ node.label }}</span>
				<span class="add-delete-icon" @click.stop="updateCatalogueItem(node,data)">
					<el-icon :size="20"><edit/></el-icon>
				</span>
				<span class="add-delete-icon" @click.stop="addCatalogueItem(node,data)">
					<el-icon :size="20"><folder-add/></el-icon>
				</span>
				<span class="add-delete-icon" @click.stop="deleteCatalogueItem(node,data)">
					<el-icon :size="20"><folder-remove/></el-icon>
				</span>
			</span>
		</template>
	</el-tree>
</div>
</el-aside>
<!-- 左边目录树 end -->
<!-- 右边主体内容 start -->
<el-main>
<div class="chapter-main">
	<!-- 顶部按钮 start -->
	<div class="main-top">
		<el-upload
			:action="'http://localhost:8080/file/upload/'+thisCatalogueId"
			multiple
			@success="uploadSuccess"
			name="file">
			<el-button type="primary">点击上传</el-button>
		</el-upload>
	</div>
	<!-- 顶部按钮 end -->
	<el-divider></el-divider>
	<!-- 下面展示的内容 start -->
	<div class="main-bottom">
		<el-empty description="没有资源" v-if="resourceList.length<1"></el-empty>
		<el-card shadow="hover" v-for="item in resourceList">
			<div class="card-box">
				<div class="resource-name">
					{{ item.resourceName }}
				</div>
				<div class="resource-button">
					<el-button type="primary" @click="downloadFile(item.resourceUrl)">下载</el-button>
					<el-button type="danger" @click="deleteResource(item.id)">删除</el-button>
				</div>
			</div>
		</el-card>
	</div>
	<!-- 下面展示的内容 start -->
</div>
</el-main>
<!-- 右边主体内容 end -->
</el-container>
</div>
</div>
</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessageBox, ElMessage} from 'element-plus';

export default {
	name: "Chapter",
	data() {
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData: this.$store.state.teacherInfoData,
			/**
			 * 目录数据
			 */
			catalogueData: [],
			/*
			* 给初始值
			* */
			thisCatalogueId: -1,
			/*
			* 资源列表
			* */
			resourceList: [],
		}
	},
	methods: {
		/**
		 * 增加资源目录方法
		 * @param node
		 * @param data
		 */
		addCatalogueItem(node, data) {
			ElMessageBox.prompt('请输入目录名称', '创建目录', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then((value) => {
				axios.post(ipconfig.address + "/catalogue/addOrUpdateCatalogue", {
					parentId: data.id,
					catalogueText: value.value,
					courseId: this.teacherInfoData.thisEditCourse.id,
					state: 1,
				}).then((response) => {
					if (response.data.code == 200) {
						ElMessage.success(response.data.message);
						location.reload();
					} else {
						ElMessage.warning(response.data.message);
					}
				}).catch((error) => {
					console.log(error);
				});
			}).catch(() => {
			});
		},
		/**
		 * 删除资源目录方法
		 * @param node
		 * @param data
		 */
		deleteCatalogueItem(node, data) {
			ElMessageBox.confirm(
				'确定要删除?' + data.id,
				'删除',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.get(ipconfig.address + "/file/deleteCatalogue/" + data.id).then((response) => {
					if (response.data.code == 200) {
						location.reload();
						ElMessage.success(response.data.message);
					} else {
						ElMessage.warning(response.data.message);
					}
				}).catch((error) => {
					console.log(error);
				});
			});
		},
		/**
		 * 修改资源目录方法
		 * @param node
		 * @param data
		 */
		updateCatalogueItem(node, data) {
			console.log(data)
			ElMessageBox.prompt('请输入目录名称', '修改目录', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then((value) => {
				axios.post(ipconfig.address + "/catalogue/addOrUpdateCatalogue", {
					id: data.id,
					catalogueText: value.value,
				}).then((response) => {
					if (response.data.code == 200) {
						ElMessage.success(response.data.message);
						location.reload();
					} else {
						ElMessage.warning(response.data.message);
					}
				}).catch((error) => {
					console.log(error);
				});
			}).catch(() => {
			});
		},
		/**
		 * 树被点击事件，加载右边的数据
		 * @param data
		 * @param childrenNode
		 * @param node
		 */
		treeClick(data, childrenNode, node) {
			// 把当前节点资源点id存起来
			this.thisCatalogueId = data.id;
			// 获取数据 这个目录下的资源
			axios.get(ipconfig.address + "/file/resourceList/" + data.id).then((response) => {
				if (response.data.code == 200) {
					this.resourceList = response.data.data;
				} else {
					ElMessage.warning(response.data.message);
				}
			}).catch((error) => {
				console.log(error);
			});
		},
		/**
		 * 上传成功的回调
		 * @param response
		 * @param file
		 * @param fileList
		 */
		uploadSuccess(response, file, fileList) {
			if (response.code == 200) {
				ElMessage.success(response.message);
			} else {
				ElMessage.warning(response.data.message);
			}
		},
		/**
		 * 下载文件事件
		 * @param path
		 */
		downloadFile(path) {
			window.open(ipconfig.address + "/file/download?path=" + path);
		},
		deleteResource(resourceId) {
			ElMessageBox.confirm(
				'确定要删除?' + resourceId,
				'删除',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.delete(ipconfig.address + "/resource/deleteResource/" + resourceId).then((response) => {
					if (response.data.code == 200) {
						location.reload();
						ElMessage.success(response.data.message);
					} else {
						ElMessage.warning(response.data.message);
					}
				}).catch((error) => {
					console.log(error);
				});
			});
		}

	},
	mounted() {
		// 在这获取资源目录数据
		axios.get(ipconfig.address + "/catalogue/catalogueList/"
			+ this.teacherInfoData.thisEditCourse.id + "?state=1").then((response) => {
			if (response.data.code == 200) {
				this.catalogueData = response.data.data;
				ElMessage.success(response.data.message);
			} else {
				ElMessage.warning(response.data.message);
			}
		}).catch((error) => {
			console.log(error);
		});
	}

}
</script>

<style lang="scss" scoped>
.add-delete-icon {
	display: none;
}

.add-delete-icon-box:hover .add-delete-icon {
	display: inline;

}

.chapter-box {
	width: 100%;
	background: #ffffff;

	.chapter-content {
		padding: 20px;

		.top-box {
			margin-top: 20px;
			margin-bottom: 20px;
			display: flex;

			div {
				margin-left: 10px;
			}
		}

		.chapter-tree {
			border-right: 1px solid #E1E1E1;
		}

		.chapter-main {
			width: 100%;

			.main-top {

			}

			.main-bottom {
				.card-box {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

}
</style>